<template>
  <div>
    <div v-if="head.tableType !== 3 && head.tableType !== '3'" class="buttons">
      <el-button size="mini" type="primary" icon="el-icon-edit" @click="openGroup">分组</el-button>
    </div>
    <el-table :data="tableData" tooltip-effect="dark" style="width: 100%">
      <el-table-column :label="$t('#')" prop="index" align="center" width="50" fixed="left" />
      <el-table-column prop="dbLength" label="字段备注" width="240px">
        <template slot-scope="scope">
          <el-form-item>
            <el-input
              v-model="scope.row.dbFieldTxt"
              disabled
            /> </el-form-item></template>
      </el-table-column>
      <el-table-column prop="dbFieldName" label="控件标签" width="240px">
        <template slot-scope="scope">
          <el-form-item>
            <el-input v-model="scope.row.pageTitle" :disabled="scope.row.dbFieldName == 'id'" />
          </el-form-item>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="dbFieldName" label="字段名称" width="240px">
        <template slot-scope="scope">
          <el-form-item>
            <el-input
              v-model="scope.row.dbFieldName"
              disabled
            /> </el-form-item></template>
      </el-table-column> -->
      <el-table-column prop="dbPointLength" label="表单显示" width="80px" align="center">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.isShowForm" :checked="scope.row.isShowForm" :disabled="scope.row.dbFieldName == 'id'" />
        </template>
      </el-table-column>
      <!-- <el-table-column prop="dbPointLength" label="是否只读" width="80px" align="center">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.isReadOnly" :checked="scope.row.isReadOnly" :disabled="scope.row.dbFieldName == 'id'" />
        </template>
      </el-table-column> -->
      <el-table-column prop="dbPointLength" label="表格显示" width="80px" align="center">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.isShowList" :checked="scope.row.isShowList" :disabled="scope.row.dbFieldName == 'id'" />
        </template>
      </el-table-column>
      <el-table-column prop="dbDefaultVal" label="控件类型" width="240px">
        <template slot-scope="scope">
          <el-form-item>
            <template v-if="scope.row.fieldShowType!='cascader_component'">
              <el-select v-model="scope.row.fieldShowType" placeholder="请选择" :disabled="scope.row.dbFieldName == 'id'" @change="chooseType(scope.row)">
                <el-option v-for="item in controlOption" :key="item.value" :label="item.title" :value="item.value" />
              </el-select>
            </template>
            <template v-else>
              <el-col :span="18">
                <el-select v-model="scope.row.fieldShowType" placeholder="请选择" :disabled="scope.row.dbFieldName == 'id'" @change="chooseType(scope.row)">
                  <el-option v-for="item in controlOption" :key="item.value" :label="item.title" :value="item.value" />
                </el-select>
              </el-col>
              <el-col :span="6">
                <el-button icon="el-icon-position" @click="componentOpenDialog(scope.row)" />
              </el-col>
            </template>
          </el-form-item>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="fieldGrid" label="控件布局" width="240px">
        <template slot-scope="scope">
          <el-form-item>
            <el-select v-model="scope.row.fieldGrid" placeholder="请选择" :disabled="scope.row.dbFieldName == 'id'">
              <el-option v-for="item in gridOption" :key="item.value" :label="item.title" :value="item.value" />
            </el-select>
          </el-form-item>
        </template>
      </el-table-column> -->
      <el-table-column prop="fieldGrid" label="数据来源" width="240px">
        <template slot-scope="scope">
          <el-form-item>

            <el-select v-if=" typeDisabled(scope.row)" v-model="scope.row.dataSource" placeholder="请选择" :disabled="scope.row.dbFieldName == 'id'">
              <el-option v-for="item in dataSourceOption" :key="item.value" :label="item.title" :value="item.value" />
            </el-select>
            <el-input v-else :disabled="true" />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column prop="dbLength" label="字典 / 日期格式" width="240px">
        <template slot="header">
          <span>字典 / 日期格式</span>
          <el-tooltip
            class="item"
            effect="light"
            content="只支持【下拉框,复选框,单选框,多选下拉框】有默认值
          日期 / 时间可配置显示格式 "
            placement="top-start"
          >
            <i class="el-icon-info" />
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <el-form-item>
            <el-input v-if="scope.row.fieldShowType === 'text'" v-model="scope.row.fieldDefaultValue" :disabled="scope.row.dbFieldName == 'id' || scope.row.fieldShowType === 'text'" />
            <el-row
              v-else-if="(scope.row.fieldShowType === 'list'
                || scope.row.fieldShowType === 'choose'
                || scope.row.fieldShowType==='radio') && scope.row.dataSource=='dict'"
            >
              <el-col :span="18">
                <el-select v-model="scope.row.fieldDefaultValue" clearable filterable :placeholder="$t('请选择')">
                  <el-option v-for="dict in dictOptions" :key="dict.dictType" :label="$t(dict.dictName)" :value="dict.dictType" />
                </el-select>
              </el-col>
              <el-col :span="3">
                <el-button icon="el-icon-plus" type="text" @click="toSysDict(scope.$index)" />
              </el-col>
              <el-col :span="3">
                <el-button icon="el-icon-view" type="text" @click="viewSysDict(scope.row.fieldDefaultValue)" />
              </el-col>
            </el-row>
            <el-select
              v-else-if="scope.row.fieldShowType === 'date'
                || scope.row.fieldShowType === 'time' "
              v-model="scope.row.fieldDefaultValue"
              clearable
              filterable
              :placeholder="$t('请选择')"
            >
              <el-option v-for="item in scope.row.fieldShowType === 'date' ? dateDisplayFormatOption : timeDisplayFormatOption" :key="item.title" :label="item.title" :value="item.value" />
            </el-select>
            <el-row v-else-if="scope.row.dataSource === 'source'">
              <el-col :span="18">
                <el-select v-model="scope.row.fieldDefaultValue" clearable filterable :placeholder="$t('请选择')">
                  <el-option v-for="item in dataSetOption" :key="item.code" :label="item.name" :value="item.code" />
                </el-select>
              </el-col>
              <el-col :span="3">
                <el-button icon="el-icon-plus" type="text" @click="toOnlCgformFieldData(scope.$index,false)" />
              </el-col>
              <el-col :span="3">
                <el-button icon="el-icon-view" type="text" @click="toOnlCgformFieldData(scope.$index,true)" />
              </el-col>
            </el-row>
            <el-input v-else v-model="scope.row.fieldDefaultValue" disabled />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-form-item>
            <!-- <el-input v-model="scope.row.fieldPatternDefalutValue" /> -->
            <el-button
              v-if="!(scope.row.dbFieldName == 'id')"
              icon="el-icon-s-operation"
              size="mini"
              type="text"
              @click="clickDefalutValueHandler(scope.row,scope.$index)"
            />
          </el-form-item>
        </template>
      </el-table-column>
    <!-- <el-table-column label="控件表达式" width="240px">
        <template slot-scope="scope">
          <el-form-item>
            <el-input v-model="scope.row.interExpress" />
          </el-form-item>
        </template>
      </el-table-column> -->

    </el-table>
    <el-dialog :title="'新增关联数据'" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <onlCgformFieldDataForm ref="onlCgformFieldDataForm" />
    </el-dialog>
    <el-dialog :title="'新增字典'" :visible.sync="viewDictOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <addingDictionary ref="addingDictionary" />
    </el-dialog>

    <el-dialog
      :title="moreTitle"
      :visible.sync="moreOpen"
      :close-on-click-modal="false"
      :lock-scroll="false"
      top="30px"
      width="50%"
      append-to-body
    >
      <el-form ref="form" class="dataForm" :model="rowScope" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('控件默认值')">
              <el-input v-if="!dictShow" v-model="rowScope.fieldPatternDefalutValue" :placeholder="$t('控件默认值')" />
              <template v-else>
                <el-col :span="20">
                  <dictSelect v-if="chooseInputOrSelect" v-model="rowScope.fieldPatternDefalutValue" :clearable="true" :dictionary="rowScope.fieldDefaultValue" />
                  <el-input v-if="!chooseInputOrSelect" v-model="rowScope.fieldPatternDefalutValue" :placeholder="$t('控件默认值')" />
                </el-col>
                <el-col :span="4">
                  <el-button icon="el-icon-s-operation" @click="chooseInputOrSelect=!chooseInputOrSelect;rowScope.fieldPatternDefalutValue=''">切换控件</el-button>
                </el-col>
              </template>
            </el-form-item>
            <template v-if="!dictShow">
              <el-button v-for="(item, index) in delList" :key="index" size="mini" @click="sysBtnClick(item)">{{ item.title }}</el-button>
            </template>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('控件表达式')">
              <el-input v-model="rowScope.interExpress" :placeholder="$t('控件表达式')" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('控件布局')">
              <el-select v-model="rowScope.fieldGrid" placeholder="请选择">
                <el-option v-for="item in gridOption" :key="item.value" :label="item.title" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('是否固定列')">
              <el-switch v-model="rowScope.fieldTableFixed" active-color="#1abc9c" inactive-color="#e74c3c" active-value="true" inactive-value="false" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('PC列宽度')">
              <el-input v-model="rowScope.fieldTableWidth" :placeholder="$t('列宽度')" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('手机列宽度')">
              <el-input v-model="rowScope.fieldTablePhoneWidth" :placeholder="$t('手机列宽度')" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('列表显示链接')">
              <el-select v-model="rowScope.listLink" placeholder="请选择">
                <el-option v-for="item in listLink" :key="item.value" :label="item.title" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('链接地址')">
              <el-input v-model="rowScope.linkAddress" :placeholder="$t('链接地址')" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('链接参数')">
              <span slot="label">
                {{ $t('链接参数') }}
                <el-tooltip placement="top">
                  <div slot="content">多个参数用,分割。取行字段信息用{}包裹起来例:{id}
                  </div>
                  <i class="el-icon-question" />
                </el-tooltip>
              </span>
              <el-input v-model="rowScope.linkParam" :placeholder="$t('链接参数')" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('控件提示语句')">
              <el-input v-model="rowScope.delPlaceholder" :placeholder="$t('控件提示语句')" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('是否只读')">
              <el-switch v-model="rowScope.isReadOnly" active-color="#1abc9c" inactive-color="#e74c3c" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="moreOpen=false">确认</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="联动组件"
      :visible.sync="componentOpen"
      :close-on-click-modal="false"
      :lock-scroll="false"
      width="50%"
      append-to-body
    >
      <el-form ref="form" class="dataForm" :model="cascaderJson" label-width="80px" :rules="rules">
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('联动字段')">
              <el-select v-model="cascaderJson.cascader_f" clearable filterable :placeholder="$t('请选择')" @change="disabledType">
                <el-option v-for="item in cascaderField" :key="item.dbFieldName" :label="item.dbFieldName" :value="item.dbFieldName" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('数据来源')" prop="data_s">
              <el-select v-model="cascaderJson.data_s">
                <el-option
                  v-for="item in dataSourceOption"
                  :key="item.value"
                  :label="item.title"
                  :value="item.value"
                  :disabled="item.disabled"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-if="cascaderJson.data_s=='dict'" :span="24">
            <el-form-item :label="$t('字典')" prop="exec_code">
              <el-select v-model="cascaderJson.exec_code" clearable filterable :placeholder="$t('请选择')">
                <el-option v-for="dict in dictOptions" :key="dict.dictType" :label="$t(dict.dictName)" :value="dict.dictType" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-if="cascaderJson.data_s=='source'" :span="24">
            <el-form-item :label="$t('数据源')" prop="exec_code">
              <el-select v-model="cascaderJson.exec_code" clearable filterable :placeholder="$t('请选择')">
                <el-option v-for="item in dataSetOption" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="componentClose()">确认</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="'分组字段'" :visible.sync="groupOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <onlCgformGroupFieldList ref="groupItem" :head-id="head.id" @group="groupField" />
    </el-dialog>
    <el-dialog v-el-drag-dialog :title="$t('字典维护')" :close-on-click-modal="false" :destroy-on-close="true" :visible.sync="dictOpen" width="70%" append-to-body custom-class="dialogForm">
      <dictData :dict-id-child="dictIdChild" />
    </el-dialog>
  </div>
</template>

<script>
import {
  mapState,
  mapActions
} from 'vuex'
import {
  optionselect as getDictOptionselect
} from '@/api/system/dict/type'
import {
  getDataSetList
} from '@/api/system/desform/onlineForm/onlCgformHead'
import onlCgformFieldDataForm from '@/views/system/desform/onlCgFormFieldData/onlCgformFieldDataForm.vue'
import onlCgformGroupFieldList from '@/components/desform/online/OnlCgformGroupFieldList.vue'
import addingDictionary from './addingDictionary.vue'
import { listOnlCgformGroupField } from '@/api/system/desform/onlineForm/onlCgformGroupField'
import dictData from './data.vue'
const commonPageOptions = [
  // { title: '开关', value: 'switch' },
  // { title: '文件', value: 'file' },
  // { title: '图片', value: 'image' },
  {
    title: '文本框',
    value: 'text'
  },
  {
    title: '多行文本',
    value: 'textarea'
  },
  {
    title: '密码',
    value: 'password'
  },
  {
    title: '下拉框',
    value: 'list'
  },
  {
    title: '多选框',
    value: 'choose'
  },
  {
    title: '单选框',
    value: 'radio'
  },
  // { title: '复选框', value: 'checkbox' },
  {
    title: '日期',
    value: 'date'
  },
  {
    title: '时间',
    value: 'time'
  },
  {
    title: '联动组件',
    value: 'cascader_component'
  },
  {
    title: '用户',
    value: 'user'
  },
  {
    title: '用户(多选)',
    value: 'user_multiple'
  },
  {
    title: '部门',
    value: 'dept'
  },
  {
    title: '金额 (单位:元)',
    value: 'money'
  },
  {
    title: '金额 (单位:万)',
    value: 'moneyThousand'
  },
  {
    title: '数值',
    value: 'number'
  },
  {
    title: '跳转链接',
    value: 'elLink'
  },
  {
    title: '项目基本信息(公司搜索)',
    value: 'deal_search_company'
  },
  {
    title: '项目基本信息(查看投资架构图)',
    value: 'structure_char'
  },
  {
    title: '项目基本信息(投资机构搜索)',
    value: 'deal_search_invest'
  },
  {
    title: '搜索',
    value: 'search_company'
  },
  {
    title: '搜索项目品牌&投资机构',
    value: 'search_invest'
  }

]
const gridOption = [{
    title: '一行一列',
    value: '24'
  },
  {
    title: '一行两列',
    value: '12'
  },
  {
    title: '一行三列',
    value: '8'
  },
  {
    title: '一行四列',
    value: '6'
  }
]
const queryModeOption = [{
    title: '模糊查询',
    value: 'single'
  },
  {
    title: '范围查询',
    value: 'group'
  },
  {
    title: '精确查询',
    value: 'accurate'
  }

]
const dateDisplayFormatOption = [{
    title: 'yyyy/MM/dd',
    value: 'yyyy/MM/dd'
  },
  {
    title: 'yyyy-MM-dd',
    value: 'yyyy-MM-dd'
  },
  {
    title: 'yyyy年MM月dd日',
    value: 'yyyy年MM月dd日'
  },
  {
    title: 'yyyy年MM月dd日 HH时mm分ss秒',
    value: 'yyyy年MM月dd日 HH时mm分ss秒'
  },
  {
    title: 'yyyy/MM',
    value: 'yyyy/MM'
  },
  {
    title: 'yyyy年MM月',
    value: 'yyyy年MM月'
  },
  {
    title: 'yyyy.MM.dd HH:mm:ss',
    value: 'yyyy.MM.dd HH:mm:ss'
  },
  {
    title: 'yyyy',
    value: 'yyyy'
  }
]
const timeDisplayFormatOption = [{
    title: 'HH:mm:ss',
    value: 'HH:mm:ss'
  },
  {
    title: 'HH时mm分ss秒',
    value: 'HH时mm分ss秒'
  }

]
const systemFeild = ['create_by',
  'create_time', 'update_by', 'update_time',
  'act_id', 'act_status', 'act_title', 'fund_id', 'deal_id', 'lp_id'
]
const listLink = [
  {
    title: '否',
    value: 'N'
  },
  {
    title: '是',
    value: 'Y'
  }
]

const dataSourceOption = [{
    title: '字典',
    value: 'dict',
    disabled: false
  },
  {
    title: '数据源',
    value: 'source',
     disabled: false
  }

]
const delList = [{
    title: '登录用户',
    value: '#{sysUserId}'
  },
  {
    title: '用户姓名',
    value: '#{sysUserName}'
  },
  {
    title: '用户部门',
    value: '#{sysDeptId}'
  },
  {
    title: '当前日期',
    value: '#{date}'
  },
  {
    title: '当前时间',
    value: '#{time}'
  },
  {
    title: '日期时间',
    value: '#{datetime}'
  }
]
export default {
  name: 'PageProperty',
  components: {
    onlCgformFieldDataForm,
    addingDictionary,
    onlCgformGroupFieldList,
    dictData
  },
  props: {
    rele: {
      type: String,
      default: '',
      require: false
    }
  },
  data() {
    return {
      i: 1,
      btnDis: true,
      viewDictOpen: false,
      chooseInputOrSelect: false,
      dictIdChild: '',
      tableData: [],
      // 字典信息
      dictOptions: [],
      queryModeOption: queryModeOption,
      gridOption: gridOption,
      controlOption: commonPageOptions,
      dateDisplayFormatOption: dateDisplayFormatOption,
      timeDisplayFormatOption: timeDisplayFormatOption,
      systemFeild: systemFeild,
      dataSourceOption: dataSourceOption,
      delList: delList,
      dataSetOption: [],
      cascaderField: [], // 存放是联动组件的字段
      tempTb: this.dbPropertyList,
      // 关联数据弹出层
      formOpen: false,
      // 新增字典弹出层
      dictOpen: false,
      // 更多配置弹窗
      moreOpen: false,
      dictShow: false,
      moreTitle: '',
      rowScope: {}, // 行对象
      componentOpen: false, // 组件配置
      cascaderJson: {},
      recordIndexValue: '',
      groupOpen: false,
      dialog: true,
      listLink: listLink,
      rules: {
        data_s: [
             { required: true, message: this.$t('必填信息'), trigger: 'blur' }
         ],
        exec_code: [
             { required: true, message: this.$t('必填信息'), trigger: 'blur' }
         ]
      },
      groupFields: []
    }
  },
  computed: {
    ...mapState('dbAbout', ['dbPropertyList', 'indexMemory', 'head'])

  },
  watch: {
    indexMemory: {
      handler() {
        const {
          newIndex,
          oldIndex
        } = this.indexMemory
        console.log('交换', newIndex, oldIndex)
        const currRow = this.tableData.splice(oldIndex, 1)[0]
        this.tableData.splice(newIndex, 0, currRow)
        let i = 1
        this.tableData.forEach(e => {
          e.index = i++
        })
      }
    },
    dbPropertyList: {
      handler() {
        this.wrapperData()
      },
      deep: true
    },
    rele: {
      handler(value) {
        if (value) {
          const exist = this.controlOption.find(item => item.value === 'link_deal')
          if (!exist) {
            const arr = [{
                title: '链接_项目',
                value: 'link_deal'
              },
              {
                title: '链接_基金',
                value: 'link_fund'
              },
              {
                title: '链接_公司',
                value: 'link_company'
              }
            ]
            for (let i = 0; i < arr.length; i++) {
              this.controlOption.push(arr[i])
            }
          } else {
            if (value === 'norm_form') {
              for (let i = 0; i < this.tableData.length; i++) {
                if (this.tableData[i].fieldShowType === 'link_deal' ||
                  this.tableData[i].fieldShowType === 'link_fund' ||
                  this.tableData[i].fieldShowType === 'link_company'
                ) {
                  this.tableData[i].fieldShowType = 'text'
                }
              }
              this.controlOption = this.controlOption.filter(item => {
                return item.value.split('_')[0] !== 'link'
              })
            }
          }
        }
      },
      immediate: true
    }

  },
  created() {
    this.wrapperData()
    // 关联数据下拉列表
    this.getDataSet()
    // 查询字典下拉列表
    this.getDict()
  },
  methods: {
    ...mapActions('dbAbout', ['selectedController']),
    // 封装成这个表单需要的数据
    wrapperData() {
      this.tableData = []
      this.$nextTick(() => {
        this.tableData = this.dbPropertyList.map(e => {
          return {
            'index': e.index,
            'dbFieldName': e.dbFieldName,
            'dbFieldTxt': e.dbFieldTxt,
            'isShowForm': e.dbFieldName === 'id' ? false : e.isShowForm === undefined ? this.isChecked(e.dbFieldName) : !(e.isShowForm === 0),
            'isReadOnly': e.dbFieldName === 'id' ? false : e.isReadOnly === undefined ? false : !(e.isReadOnly === 0),
            'fieldShowType': e.fieldShowType || 'text',
            //  'queryMode': e.queryMode || 'single',
            'fieldDefaultValue': e.fieldDefaultValue || '',
            //  'isQuery': e.dbFieldName === 'id' ? false : e.isReadOnly === undefined ? false : !(e.isQuery === 0),
            'isShowList': e.dbFieldName === 'id' ? false : e.isShowList === undefined ? this.isChecked(e.dbFieldName) : !(e.isShowList === 0),
            'fieldGrid': e.fieldGrid,
            'dateDisplay': [],
            'dataSource': e.dataSource || '',
            'fieldPatternDefalutValue': e.fieldPatternDefalutValue || '',
            'pageTitle': e.pageTitle ? e.pageTitle : e.dbFieldTxt,
            'interExpress': e.interExpress || '',
            'cascaderJson': e.cascaderJson || '',
            'listLink': e.listLink || 'N',
            'linkAddress': e.linkAddress || '',
            'linkParam': e.linkParam || '',
            'fieldTableFixed': e.fieldTableFixed || '',
            'fieldTableWidth': e.fieldTableWidth || '',
            'fieldTablePhoneWidth': e.fieldTablePhoneWidth || '',
            'delPlaceholder': e.delPlaceholder || ''
          }
        })
      })
      this.$forceUpdate()
    },
    // 根据选择的不同控件  禁用不同模式的查询
    chooseType(data) {
      const val = data.fieldShowType
      this.selectedController(data)
      if (val === 'text' || val === 'textarea' ||
        val === 'user' || val === 'dept' || val === 'link_deal' ||
        val === 'link_fund' || val === 'link_company'
      ) {
        data.fieldDefaultValue = ''
      } else if (val === 'date') {
        // 格式化日期
        data.dateDisplay = this.dateDisplayFormatOption
      } else if (val === 'time') {
        data.dateDisplay = this.timeDisplayFormatOption
      }
        if (data.cascaderJson) {
            const currentCascader = JSON.parse(data.cascaderJson)
            console.log('hhh', currentCascader)
            const cascaderComponentCount = this.tableData.filter(item => item.fieldShowType === 'cascader_component')
            if (cascaderComponentCount) {
                // 如果修改比deep层级深度大的 cascader_component 为 select
                cascaderComponentCount.map(component => {
                    const tempJson = JSON.parse(component.cascaderJson)
                    if (currentCascader.deep < tempJson?.deep) {
                         this.tableData[component.index - 1].fieldShowType = 'list'
                         this.tableData[component.index - 1].cascaderJson = ''
                         if (tempJson.data_s) {
                            this.tableData[component.index - 1].dataSource = tempJson.data_s
                         }
                         if (tempJson.exec_code) {
                            this.tableData[component.index - 1].fieldDefaultValue = tempJson.exec_code
                         }
                    }
                })
              }
        }
        // 记录当前值
        this.recordIndexValue = val
    },
    componentOpenDialog(data) {
       const val = data.fieldShowType
       const fieldName = data.dbFieldName
        if (val === 'cascader_component') { // 如果是联动组件 打开dialog 选配置
            this.cascaderJson = {}
            this.rowScope = data
           // 是联动组件的字段
            this.cascaderField = this.tableData.filter(item => item.fieldShowType === 'cascader_component' && item.dbFieldName !== fieldName)
             if (data.cascaderJson) {
                this.cascaderJson = JSON.parse(data.cascaderJson)
             }
            this.componentOpen = true
      }
    },
    componentClose() {
        this.$refs['form'].validate(valid => {
               if (valid) {
                  // {
            // data_s: "", // 数据来源 是字典还是 关联数据
            // exec_code:"" // 执行的 是 关联数据编码还是 字典的编码
            // key: "", // 联动的值 默认为value
            // deep："" // 层级 1，2，3
            // cascader_f:"" // 联动的字段  如果层级是1 的话就不需要联动字段
            // }
            const cascaderJson_t = {
                  'data_s': this.cascaderJson.data_s,
                  'exec_code': this.cascaderJson.exec_code,
                  'key': 'value',
                  'deep': 1,
                  'cascader_f': ''
            }
              const fName = this.cascaderJson.cascader_f
              if (fName) {
                  console.log('fName', fName)
                    // 拿到联动 字段的层级
                  const tempArr = this.tableData.filter(item => item.dbFieldName === fName)
                   console.log('tempArr', tempArr)
                  if (tempArr) {
                      const t_arr_obj = JSON.parse(tempArr[0].cascaderJson)
                      cascaderJson_t.deep = t_arr_obj.deep + 1
                      cascaderJson_t.cascader_f = ''
                      // 联动的目标
                      t_arr_obj.cascader_f = this.rowScope.dbFieldName
                      this.tableData[tempArr[0].index - 1 ].cascaderJson = JSON.stringify(t_arr_obj)
                      console.log('上一个', this.tableData[tempArr[0].index - 1 ].cascaderJson)
                  }
              }
              this.rowScope.cascaderJson = JSON.stringify(cascaderJson_t)
              this.componentOpen = false
            }
        })
    },
    isChecked(val) {
      if (val) {
        return !this.systemFeild.includes(val)
      }
    },
    typeDisabled(data) {
      const val = data.fieldShowType
      if (val === 'list' || val === 'choose' || val === 'radio') {
        return true
      }
      return false
    },
    getDataSet() {
      getDataSetList().then(res => {
        this.dataSetOption = res.data
      })
    },
    // 新增关联数据
    toOnlCgformFieldData(index, isEdit) {
      const value = this.tableData[index].fieldDefaultValue
       if (!value && isEdit) {
        this.$message({ message: '请选择数据源', type: 'warning' })
          return
       }
       this.formOpen = true
      const foundOption = this.dataSetOption.find(option => option.code === value)
      let rowId
      if (foundOption && isEdit) {
        rowId = foundOption.id
      }
      var addData = {
        id: rowId,
        index: index
      }
      this.$nextTick(() => {
        this.$refs.onlCgformFieldDataForm.init(addData)
      })
    },
    // 新增字典
    toSysDict(index) {
      this.viewDictOpen = true
      this.$nextTick(() => {
        this.$refs.addingDictionary.init(index)
      })
    },
    // 查询字典下拉列表
    getDict() {
      getDictOptionselect().then(response => {
        this.dictOptions = response.data
      })
    },
    clickDefalutValueHandler(row, index) {
      this.moreOpen = true
      this.rowScope = row
      this.moreTitle = row.pageTitle
      // 控件默认值常用的分为两种，下拉框 和 系统自带的默认值
      if (row.fieldShowType === 'list' || row.fieldShowType === 'radio' || row.fieldShowType === 'choose') {
        this.dictShow = true
      } else {
        this.dictShow = false
      }
      console.log(row, index)
    },
    sysBtnClick(item) {
      this.rowScope.fieldPatternDefalutValue = item.value
    },
    disabledType(val) {
      if (val) {
          this.dataSourceOption[0].disabled = true
      } else {
         this.dataSourceOption[0].disabled = false
      }
    },
    // 分组
    openGroup() {
      var formItems = this.tableData.filter(item => item.isShowForm)
      this.groupOpen = true
      this.$nextTick(() => {
        this.$refs.groupItem.initGroupField(formItems)
      })
    },
    groupField(fields) {
      this.groupFields = fields || []
    },
    getGroupFields(headId) {
      listOnlCgformGroupField({ headId: headId }).then(res => {
        console.log(res.rows, 'huoqudjsflkasjl')
        this.groupFields = res.rows
      })
    },
    // 查看字典
    viewSysDict(value) {
        const foundOption = this.dictOptions.find(option => option.dictType === value)
        if (foundOption) {
          this.dictIdChild = foundOption.dictId
          this.dictOpen = true
        } else {
            this.$message({
                message: '请选择字典',
                type: 'warning'
            })
        }
    }
  }
}
</script>

<style scoped>
.buttons {
  margin-bottom: 10px;
}

/* 修改行的最小高度 */
.dataForm .el-row .el-form-item {
  min-height: 0px;
}
</style>
